import { observer } from 'mobx-react-lite';
import React, { useEffect, useRef } from 'react';

import RootRouter from 'Routers/root.router';

import type { RootStore } from 'Core/RootStore';

import styles from './index.module.less';

type Props = {
    store: RootStore;
};

const App: React.FC<Props> = props => {
    const { store } = props;
    const { destory } = store;
    const wrapperRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        return () => {
            destory();
        };
    }, [destory, store]);

    return (
        <div className={styles.wrapper} ref={wrapperRef}>
            <RootRouter store={store} wrapperRef={wrapperRef} />
        </div>
    );
};

export default observer(App);
